<template>
  <Card>
    <span slot="title">材料审核</span>
    <div slot="content">
      <div class="declaration_notice">
        <!-- 顶部工具 -->
        <div class="top_tools">
          <el-form size="small" inline ref="searchForm" :model="searchForm">
            <el-form-item prop="user">
              <el-input
                v-model="searchForm.user"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="time">
              <el-input
                v-model="searchForm.time"
                placeholder="申报时间"
              ></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                v-model="searchForm.name"
                placeholder="单位名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <we-button size="small" type="primary" @click="handleSearch"
                >查询</we-button
              >
              <we-button size="small" @click="handleReset">重置</we-button>
            </el-form-item>
          </el-form>
          <div class="right_btns">
            <we-button size="small" @click="handleAdd">导出</we-button
            ><we-button size="small" @click="handleAdd">一览表</we-button>

            <el-badge :value="12" class="item">
              <we-button size="small" type="primary">批量处理</we-button>
            </el-badge>
          </div>
        </div>
        <!-- 表格 -->
        <div class="table">
          <!-- 表格 -->
          <el-table
            size="mini"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="declarant" label="申报人" width="80px">
            </el-table-column>
            <el-table-column prop="declarationQualification" label="申报资格">
            </el-table-column>
            <el-table-column prop="unitName" label="单位名称">
            </el-table-column>
            <el-table-column
              prop="declarationTime"
              label="申报时间"
              width="240px"
            >
            </el-table-column>
            <el-table-column prop="state" label="状态"> </el-table-column>
            <el-table-column label="操作" width="280px">
              <template>
                <we-button type="primary">详情</we-button>
                <we-button type="success">受理</we-button>
                <we-button type="warning">审核</we-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <we-Pagination
              :page="pagination.pageNum"
              :pageSize="pagination.pageSize"
              :total="pagination.total"
              @currentChange="currentChange($event)"
              @pageSizeChange="pageSizeChange($event)"
            >
              ></we-Pagination
            >
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import WePagination from "@/components/WePagination";
import { getAnnouncementManagementList } from "@/api/titleDeclaration";
import moment from "moment";

export default {
  components: {
    Card,
    WeButton,
    WePagination,
  },
  data() {
    return {
      // 搜索表单
      searchForm: {
        user: "",
        time: "",
        name: "",
      },
      // 分页数据
      pagination: {
        total: 1, // 总数据条数
        pageSize: 5, // 每页条数
        pageNum: 1, // 当前页
      },
      // 表格数据
      tableData: [],
    };
  },
  methods: {
    // 查询触发
    handleSearch() {
      // this.pagination.pageNum = 1;
      // this.fetchData();
    },
    // 重置触发
    handleReset() {
      this.$refs.searchForm.resetFields();
    },
    // 表头样式回调
    headerStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },

    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },

    // // 获取数据
    // async fetchData() {
    //   // 发送请求 获取账号列表
    //   let res = await getAnnouncementManagementList({
    //     pageNum: this.pagination.pageNum,
    //     pageSize: this.pagination.pageSize,
    //     // 查询参数
    //     title: this.searchForm.title,
    //     summary: this.searchForm.summary,
    //     createTime: this.searchForm.createTime,
    //   });
    //   // 解构数据
    //   let { code, data } = res;
    //   // 处理时间格式
    //   data.resList.forEach((item) => {
    //     console.log(item);
    //     item.createTime = moment(item.createTime).format("YYYY-MM-DD");
    //   });

    //   // 边界判断
    //   if (!data.resList.length && this.pagination.pageNum !== 1) {
    //     this.pagination.pageNum -= 1;
    //     this.fetchData();
    //   }
    //   // 赋值渲染
    //   if (code === 200) {
    //     this.pagination.total = data.totals;
    //     this.tableData = data.resList;
    //   }
    // },
  },
  // created() {
  //   this.fetchData();
  // },
};
</script>

<style lang="less" scoped>
.declaration_notice {
  .top_tools {
    display: flex;
    justify-content: space-between;
    .right_btns {
      /deep/.el-badge__content.is-fixed {
        right: 22px !important;
      }
    }
  }
  .table {
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
